<template>
    <div class="w-full h-full bg-gray-50 flex flex-col overflow-hidden">
        <!-- 个人信息卡片 -->
        <div class="bg-white shadow-sm flex-shrink-0">
            <div class="w-full px-6 py-8">
                <div class="flex flex-col md:flex-row items-center gap-6">
                    <!-- 头像上传区域 -->
                    <div class="relative group">
                        <el-avatar :size="100" :src="userAvatar"
                            class="cursor-pointer transition-all duration-300 group-hover:opacity-80" />
                        <div class="absolute inset-0 flex items-center justify-center bg-black/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                            @click="triggerAvatarUpload">
                            <el-icon class="text-white text-xl">
                                <Upload />
                            </el-icon>
                        </div>
                        <input type="file" ref="avatarInput" accept="image/*" class="hidden"
                            @change="handleAvatarUpload" />
                    </div>

                    <!-- 用户信息区域 -->
                    <div class="flex flex-col items-center md:items-start gap-2">
                        <h2 class="text-2xl font-semibold text-gray-800">
                            {{ data?.data.userName || '未设置昵称' }}
                        </h2>
                        <div class="flex gap-2 items-center text-gray-500 text-sm">
                            <el-icon>
                                <Message />
                            </el-icon>
                            <span>Email: {{ data?.data.userAccount || '-' }}</span>
                        </div>
                        <el-button type="primary" class="mt-2" @click="handleSecurityAction({
                            action: 'nickname',
                            button: '修改昵称',
                            title: '修改昵称',
                            label: '',
                            showStatus: false,
                            verified: false
                        })">
                            修改昵称
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 安全设置区域 -->
        <div class="flex-1 w-full px-6 pb-6 overflow-hidden">
            <!-- 标题 -->
            <div class="py-4 bg-gray-50">
                <div class="flex items-center gap-2">
                    <el-icon class="text-gray-600">
                        <Lock />
                    </el-icon>
                    <span class="text-lg font-medium">安全设置</span>
                </div>
            </div>

            <!-- 设置列表 -->
            <div class="h-[calc(100%-3rem)] overflow-y-auto custom-scrollbar">
                <div class="space-y-3">
                    <div v-for="item in securityItems" :key="item.title"
                        class="bg-white rounded-lg border border-gray-100 hover:shadow-md transition-shadow duration-300">
                        <div class="px-6 py-4">
                            <div class="flex items-center justify-between">
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-3 mb-1">
                                        <span class="font-medium text-gray-700">{{ item.title }}</span>
                                        <el-tag v-if="item.showStatus" :type="item.verified ? 'success' : 'warning'"
                                            size="small" class="!border-none">
                                            {{ item.verified ? '已验证' : '待验证' }}
                                        </el-tag>
                                    </div>
                                    <div class="text-gray-500 text-sm truncate">
                                        {{ item.label }}
                                    </div>
                                </div>
                                <div class="flex gap-2">
                                    <template v-if="item.action === 'identity' && item.verified">
                                        <el-button plain @click="handleViewIdentity(item)">
                                            查看
                                        </el-button>
                                        <el-button type="primary" plain @click="handleSecurityAction(item)">
                                            修改
                                        </el-button>
                                    </template>
                                    <template v-else>
                                        <el-button plain :type="item.verified ? 'default' : 'primary'"
                                            class="ml-4 flex-shrink-0" @click="handleSecurityAction(item)">
                                            {{ item.button }}
                                        </el-button>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 通用编辑弹窗 -->
        <el-dialog v-model="dialogVisible" :title="dialogConfig.title" width="500px" destroy-on-close
            @close="handleDialogClose">
            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" class="p-4">
                <!-- 手机号码表单 -->
                <template v-if="dialogConfig.type === 'phone'">
                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="formData.phone" placeholder="请输入手机号码" />
                    </el-form-item>
                    <el-form-item label="验证码" prop="code">
                        <div class="flex gap-2">
                            <el-input v-model="formData.code" placeholder="请输入验证码" />
                            <el-button :disabled="countdown > 0" @click="sendVerificationCode">
                                {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
                            </el-button>
                        </div>
                    </el-form-item>
                </template>

                <!-- 实名认证表单 -->
                <template v-if="dialogConfig.type === 'identity'">
                    <el-form-item label="真实姓名" prop="realName">
                        <el-input v-model="formData.realName" placeholder="请输入真实姓名" />
                    </el-form-item>
                    <el-form-item label="身份证号" prop="idCard">
                        <el-input v-model="formData.idCard" placeholder="请输入身份证号码" />
                    </el-form-item>
                </template>

                <!-- 查看实名信息表单 -->
                <template v-if="dialogConfig.type === 'viewIdentity'">
                    <el-form-item label="真实姓名">
                        <el-input :model-value="userRealName" disabled />
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-input :model-value="userIdCard" disabled />
                    </el-form-item>
                </template>

                <!-- 昵称表单 -->
                <template v-if="dialogConfig.type === 'nickname'">
                    <el-form-item label="昵称" prop="nickname">
                        <el-input v-model="formData.nickname" placeholder="请输入新昵称" />
                    </el-form-item>
                </template>

                <!-- 密码表单 -->
                <template v-if="dialogConfig.type === 'password'">
                    <el-form-item label="当前密码" prop="oldPassword">
                        <el-input v-model="formData.oldPassword" type="password" placeholder="请输入当前密码" />
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input v-model="formData.newPassword" type="password" placeholder="请输入新密码" />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input v-model="formData.confirmPassword" type="password" placeholder="请确认新密码" />
                    </el-form-item>
                </template>

                <!-- 支付宝表单 -->
                <template v-if="dialogConfig.type === 'alipay'">
                    <el-form-item label="手机号码" prop="alipayPhone">
                        <el-input v-model="formData.alipayPhone" placeholder="请输入支付宝绑定手机号码" />
                    </el-form-item>
                </template>
                <template v-if="dialogConfig.type === 'Bindsteam'">
                    <el-form-item label="Steam账号" prop="steamUsername">
                        <el-input v-model="formData.steamUsername" placeholder="请输入Steam账号" />
                    </el-form-item>
                    <el-form-item label="Steam密码" prop="steamPassword">
                        <el-input v-model="formData.steamPassword" type="password" placeholder="请输入Steam密码" />
                    </el-form-item>
                    <el-form-item label="令牌验证码" prop="steamGuardCode">
                        <el-input v-model="formData.steamGuardCode" placeholder="请输入Steam令牌验证码" maxlength="5" />
                    </el-form-item>
                </template>
            </el-form>

            <template #footer>
                <div class="flex justify-end gap-2">
                    <el-button plain @click="dialogVisible = false">取消</el-button>
                    <el-button plain type="primary" :loading="submitting" @click="handleSubmit">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #E5E7EB transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #E5E7EB;
    border-radius: 3px;
}
</style>

<script setup lang="ts">
import { Message, Lock, Upload } from '@element-plus/icons-vue'
import type { UserData } from '~/types/user';
const { showLoading, hideLoading } = useLoading()
definePageMeta({
    title: '个人信息',
    showInMenu: true,
    layout: 'default',
    requiresAuth: true,
    icon: 'icon-gerenxinxi'
})

// 获取用户数据
showLoading()
const { data, refresh } = await useCustomFetch<{ data: UserData }>('/api/user/userInfo', {
    method: 'POST',
    withToken: true
})

hideLoading()
// 使用组合式函数
const {
    formRef,
    formData,
    formRules,
    dialogConfig,
    dialogVisible,
    submitting,
    countdown,
    handleSecurityAction,
    handleViewIdentity,
    handleSubmit,
    handleDialogClose,
    sendVerificationCode
} = useSecurityForm(refresh)

const {
    avatarInput,
    triggerAvatarUpload,
    handleAvatarUpload
} = useAvatarUpload(refresh)

// 计算属性
const userRealName = computed(() => data.value?.data.realName || '')
const userIdCard = computed(() => data.value?.data.idCard || '')
const userAvatar = computed(() => `${url()}${data.value?.data?.avatarName}`)
const securityItems = computed(() => createSecurityItems(data.value?.data))
</script>
